<template>
  <div class="header" :class="headerClass">
    <div class="name">
      <h2>{{ website.webName }}</h2>
    </div>
    <div class="opt">
      <div class="search">
        <div class="search-img"></div>
        <input type="text" class="search-input">
      </div>
      <div class="menu">
        <ul>
          <li>
            <router-link class="a-class" :class="activeIndex === 1 ? 'menu-active' : ''" to="/">首页</router-link>
          </li>
          <li>
            <router-link class="a-class" :class="activeIndex === 2 ? 'menu-active' : ''" to="/category">分类
            </router-link>
          </li>
          <li>
            <router-link class="a-class" :class="activeIndex === 3 ? 'menu-active' : ''" to="/timeline">时间轴
            </router-link>
          </li>
          <li>
            <el-dropdown trigger="click">
              <span>
                <a href="javascript:;">外链<i class="el-icon-arrow-down el-icon--right"></i></a>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="href in hrefList" :key="href.bannerId">
                  <a target="_blank" style="text-decoration: none;color: black"
                     :href="href.bannerHref">{{ href.bannerName }}</a>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BolgHeader',
  props: {
    headerClass: {
      type: String,
      default: 'fixed-class'
    },
    activeIndex: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {
      website: {},
      hrefList: []
    }
  },
  created () {
    this.$http.get('api/website').then(data => {
      this.website = data.data
    })
    this.$http.get('api/href').then(data => {
      this.hrefList = data.data
    })
  }
}
</script>

<style scoped lang="scss">
.header {
  height: 60px;
  width: 100%;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .name {
    padding-left: 15px;
  }

  .opt {
    display: flex;
    align-items: center;

    .search {
      height: 30px;
      width: 200px;
      background-color: #fff;
      border: 1px solid grey;
      border-radius: 16px;
      display: flex;
      overflow: hidden;

      .search-img {
        height: 30px;
        width: 30px;
        background: url("../assets/search.svg") no-repeat center;
      }

      .search-input {
        height: 30px;
        display: block;
        border: none;
        outline: none;
      }
    }

    .menu {
      width: 300px;
      margin: 0 30px;

      ul {
        height: 60px;
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;

        li {
          width: 50px;
          text-align: center;

          a {
            text-decoration: none;
          }

          a:hover {
            border-bottom: 2px solid greenyellow;
          }
        }
      }
    }
  }
}

.menu-active {
  border-bottom: 2px solid greenyellow;
}

.absolute-class {
  position: absolute;
  background-color: rgba(255, 255, 255, 0);
  left: 0;
  top: 0;
  border-bottom: none;

  h2, a {
    color: #fff;
  }
}

.fixed-class {
  position: fixed;
  background-color: rgba(255, 255, 255, 1);
  left: 0;
  top: 0;
  border-bottom: 1px solid greenyellow;

  h2, a {
    color: #000;
  }
}
</style>
